<template>
  <dl class="system-projection">
    <dt>投影</dt>
    <dd :class="{ checked: systemSettingStore.$state.deskProjection === 'first' }">
      <div class="icon">
        <i class="iconfont wos-computer fs50 mr10" />
        <i class="iconfont wos-computer fs50 none" />
      </div>
      <span>仅电脑屏幕</span>
    </dd>
    <dd :class="{ checked: systemSettingStore.$state.deskProjection === 'copy' }">
      <div class="icon">
        <i class="iconfont wos-computer fs50 mr10" />
        <i class="iconfont wos-computer fs50" />
      </div>
      <span>复制</span>
    </dd>
    <dd :class="{ checked: systemSettingStore.$state.deskProjection === 'expand' }" @click="handleExpand">
      <div class="icon">
        <i class="iconfont wos-computer fs50 mr10" />
        <i class="iconfont wos-computer fs50" />
      </div>
      <span>扩展</span>
    </dd>
    <dd :class="{ checked: systemSettingStore.$state.deskProjection === 'second' }">
      <div class="icon">
        <i class="iconfont wos-computer fs50 mr10 none" />
        <i class="iconfont wos-computer fs50" />
      </div>
      <span>仅第二屏幕</span>
    </dd>
  </dl>
</template>

<script setup lang="ts">
import { useSystemSettingStore } from '@/stores/desk/systemSetting'

const systemSettingStore = useSystemSettingStore()

const handleExpand = () => {
  window.open('/win-mac/#/default/expand')
}
</script>

<style scoped lang="scss">
@import '@/assets/scss/common';

.system-projection {
  width: $task-modal-notify-width;
  height: calc(100vh - $task-bar-height);
  color: var(--task-bar-color);
  background-color: var(--task-modal-bg-color);
  border-left: 1px solid var(--task-modal-border-color);

  dt {
    height: 40px;
    line-height: 40px;
    padding-left: 10px;
  }

  > dd {
    padding: 20px 40px;
    display: flex;
    align-items: flex-end;

    &:hover {
      background-color: rgba(255, 255, 225, 0.1);
    }

    &.checked {
      background-color: rgb(7, 135, 143);
    }

    .icon {
      margin-right: 20px;

      .none {
        color: #666;
      }
    }

    > span {
      font-size: 14px;
      display: inline-block;
      padding-bottom: 10px;
    }
  }
}
</style>
